<template>
  <div class="home">
    <el-container>
      <!-- 侧边栏 -->

      <el-aside>
        <span class="logo">星空服饰POS系统</span>
        <el-menu :default-openeds="['1','2']" :router="true" class="menu">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-goods"></i>商品管理
            </template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item @click="goToItemSearch">商品查询</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-shopping-cart-2"></i>订单管理
            </template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item @click="gotoSalesearch">订单查询</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" v-show="showdiable">
            <template slot="title">
              <i class="el-icon-truck"></i>库存管理
            </template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item @click="gotoInventorySearch">库存查询</el-menu-item>
                <!-- <el-menu-item @click="gotoChangeInfo">修改信息</el-menu-item> -->
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4" v-show="showdiable">
            <template slot="title">
              <i class="el-icon-pie-chart"></i>一键报表
            </template>
            <el-menu-item-group>
              <template slot="title"></template>
              <el-menu-item @click="gotoCharts">查看报表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5" v-show="showdiable">
            <template slot="title">
              <i class="el-icon-setting"></i>系统管理
            </template>
            <el-menu-item-group>
              <template slot="dropdown"></template>
              <el-menu-item @click="gotoUserManage">管理用户</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header style="text-align: right; font-size: 20px; position:relative">
          <span>欢迎登陆！</span>
          <span>
            <el-dropdown @command="signOut">
              <span class="el-dropdown-link">
                {{username}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="out">退出登录</el-dropdown-item>
                <el-dropdown-item command="changeInfo">修改信息</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </el-header>
        <!-- 右侧区域 -->
        <el-main>
          <!-- 路由视图 -->
          <transition>
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: window.localStorage.getItem("username"),
      showdiable:window.localStorage.getItem("username")=="admin"?true:false
    };
  },
  created: function() {
    // this.$router.push('/itemsearch');
    // this.$router.push('/saleSearch');
  },
  methods: {
    goToItemSearch: function() {
      this.$router.push("/home/itemSearch");
    },
    gotoSalesearch: function() {
      this.$router.push("/home/saleSearch");
    },
    gotoCharts: function() {
      this.$router.push("/home/charts");
    },
    gotoUserManage: function() {
      this.$router.push("/home/userManage");
    },
    gotoChangeInfo: function() {
      this.$router.push("/home/changeInfo");
    },
    gotoInventorySearch: function() {
      this.$router.push("/home/inventorySearch");
    },
    gotoAddItem:function(){
      this.$router.push("/home/addItem");
    },
    /**
     * 登出
     */
    signOut: function(command) {
      if (command === "out") {
        this.$message({
          type: "success",
          message: "退出成功"
        });
        this.$router.push({ path: "/" });
        // axios
        //   .get("http://47.102.99.195:8888/user/logout",{
        //     header:{'Access-Control-Allow-Origin': '*'}
        //   })
        //   .then(res => {
        //     if(res.data.event===0){

        //     }
        //   })
        //   .catch(error => {
        //     this.$message({
        //       type: "error",
        //       message: error
        //     });
        //   });
      };
      if(command === "changeInfo"){
        this.gotoChangeInfo();
      }
    }
  }
};
</script>

<style>
.home {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: relative;
}
.el-aside {
  /* background-color: #545c64; */
  width: 200px;
  margin-top: 10px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #2c3e50;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.logo {
  color: #b3c0d1;
  font-size: 30px;
  font-family: 'Lucida Sans';
  margin-bottom: 80px;
}
.menu{
  margin-top: 70px;
}
</style>
